<script setup lang="ts">
  import dialogCloseBtn from '@/static/owo/coupon-dialog-close.png';
  import CouponCard from '@/wxcomponents/coupon-card'
  import { formatDate } from '@/utils/datetime'
  import promoTitle from '@/static/owo/coupon-promo-title.png'

  defineProps<{
    coupons: array
  }>()

  const emit = defineEmits(['close', 'confirm'])

  function onClose() {
    emit('close')
  }

  function onConfirm(coupon) {
    emit('confirm', coupon)
  }
</script>

<template>
  <view class="coupon-dialog-content">
    <image class="close-btn" :src="dialogCloseBtn" mode="aspectFit" v-on:click="onClose" />

    <view class="coupon-list">
      <coupon-card
        v-for="(coupon, index) in coupons"
        :key="index"
        :title="coupon.name"
        :content="coupon.desc"
        :expire="formatDate(coupon.end)"
        :amount="coupon.showPrice"
        v-on:click="() => onConfirm(coupon)"
      />
    </view>
  </view>
</template>

<style>
  page {
    --dialog-background-color: transparent;
  }

  .coupon-dialog-content {
    width: 100%;
    height: auto;
    position: relative;
    box-sizing: border-box;
    padding: 30px 0;
    background: linear-gradient(180deg, #D85AE7 0%, #000000 100%);
  }

  .coupon-dialog-content .bg {
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: -1;
  }

  .coupon-dialog-content .close-btn {
    position: absolute;
    top: 15px;
    right: 10px;
    width: 20px;
    height: 20px;
  }

  .coupon-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .coupon-promo-title {
    width: 196px;
    margin: 0 auto 10px;
    display: block;
  }

  .coupon-confirm-btn {
    background-image: url('~@/static/coupon-confirm-btn.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 130px;
    height: 44px;
    margin: 26px auto 0;
  }
</style>
